<script setup lang="ts">
import type { UploaderFileListItem } from 'vant';
definePageMeta({
  layout: 'default',
  title: '客服',
  i18n: 'menu.custoService',
})
const selectedId = ref<number>(-1) // -1 表示未选中
const imageUrl = ref<string>('/img/head.png');
const open = ref(true)
const showImage = ref<boolean>(false);
const imgs = ref([
  { id: 0, img: '/img/head1.png' },
  { id: 1, img: '/img/head2.png' },
  { id: 2, img: '/img/head3.png' },
  { id: 3, img: '/img/head4.png' },
  { id: 4, img: '/img/head5.png' },
  { id: 5, img: '/img/head6.png' },
  { id: 6, img: '/img/head7.png' },
  { id: 7, img: '/img/head8.png' },
])
const afterRead = (file: UploaderFileListItem | UploaderFileListItem[]) => {
  if (Array.isArray(file)) {
    handleFile(file[0]);
  } else {
    handleFile(file);
  }
};
// 上传图片
const handleFile = (fileItem: UploaderFileListItem) => {
  if (fileItem.file) {
    const reader = new FileReader();
    reader.onload = (e) => {
      imageUrl.value = e.target?.result as string;
      showImage.value = true;
      showEditIcon.value = true;
    };
    reader.readAsDataURL(fileItem.file);
  } else {
    console.error('上传的文件无效');
  }
};
</script>

<template>
  <div text-16 text-dark mx-auto mb-60 pt-15 text-center dark:text-white>
    客服
    <van-dialog v-model:show="open" :showConfirmButton="false" width="70%">
      <img src="/img/close.png" alt="" class="w-16 absolute top-10 right-10 m-5" @click="open = false">
      <van-uploader v-if="!showImage" :after-read="afterRead" />
      <img v-if="showImage" :src="imageUrl" class=" w-80 rounded-full" />
      <div class="my-10 text-12 color-#6d788e">点击头像可上传图片</div>
      <div class="text-left pl-17 color-#1d1d1d text-14">更换头像</div>
      <div class="grid grid-cols-4 gap-2 mt-2 place-items-center p-10">
        <img :src="item.img" v-for="item in imgs" :key="item.id" alt="" @click="selectedId = item.id"
          :class="{ 'selected': selectedId === item.id }" class="item-img w-50 h-50 rounded-full p-1">
      </div>
      <div class="btn w-90% mx-auto py-10 text-center text-14 bg-red color-#ffffff rounded-5 mb-20 mt-10">确认更换</div>
    </van-dialog>
  </div>
</template>
<style lang="css" scoped>
::v-deep .van-uploader__upload {
  border-radius: 100%;
  margin-top: 20px;
  width: 66px;
  height: 66px;
}

.item-img {
  box-sizing: border-box;
}

.item-img.selected {
  /* background: url('/img/head_select.png') no-repeat center center;
  background-size: 100% 100%; */
  border: 2px solid red;
  /* padding: 2px; */
}

.btn {
  background-image: linear-gradient(0deg,
      #f40000 0%,
      #ff2828 100%),
    linear-gradient(#d9d8d4,
      #d9d8d4);
}
</style>
